<template>
  <div>
    <!-- <el-form
      :model="ruleForm"
      :rules="rules"
      label-position="left"
      ref="ruleFormRef"
      label-width="80"
    > -->
    <el-row class="info-container" :gutter="20">
      <el-col :span="12">
        <el-form-item label="界面名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属部门" prop="orgId">
          <!-- <OrgCascader placeholder="请选择部门" v-model="ruleForm.orgId" :clearable="true" /> -->
          <DeptFormSelect
            width="100%"
            ref="deptFormSelect"
            :name="ruleForm.orgName"
            :placeholder="`请选择所属部门`"
            v-model:dept="ruleForm.orgId"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应用名称" prop="appId">
          <el-select v-model="ruleForm.appId" placeholder="请选择" filterable>
              <el-option
                v-for="(item, index) in appList"
                :key="index"
                :label="item.appName + '-' + item.orgName"
                :value="item.id"
              />
            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="界面标签" prop="guiTag">
          <WebviewTag class="webview-tag" :collapseTag="false" v-model="ruleForm.guiTag" :multiple="true"
            @query-change="() => { }" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="请求地址" prop="requestUrl">
          <el-input v-model="ruleForm.requestUrl" placeholder="ip或域名，以http(s)://开头" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="网络类型" prop="hostType">
          <el-select v-model="ruleForm.hostType" placeholder="请选择网络类型">
            <el-option v-for="(item, index) in hostTypeList" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- </el-form> -->
  </div>
</template>

<script>
import { defineComponent, watch, computed, ref } from "vue";
import DeptFormSelect from "@/components/DeptFormSelect/";
import OrgCascader from "@/components/OrgCascader/";
import AppAutoSelect from "@/components/AppAutoSelect/";
import WebviewTag from "@/components/WebviewTag";
import AreaSelect from "@/components/AreaSelect/";
import { getAppPageList } from "@/api/application";
export default defineComponent({
  name: "WebviewRegisterEditBaseForm",
  props: {
    modelValue: {
      type: Object,
      default: () => { },
    },
    rules: {
      type: Object,
      default: () => { },
    },
  },
  components: {
    OrgCascader,
    DeptFormSelect,
    AppAutoSelect,
    WebviewTag,
    AreaSelect,
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const ruleForm = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });
    const hostTypeList = ref([
      {
        name: '全部',
        value: 0
      },
      {
        name: '政务外网',
        value: 1
      },
      {
        name: '公网',
        value: 2
      }
    ])
    const appList = ref([])
    const getAppList = async ()=> {
      const res = await getAppPageList({size:99999,current:1})
      appList.value = res.data.list
    }
    getAppList()
    return {
      ruleForm,
      hostTypeList,
      appList
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-select),
.el-select {
  width: 100%;
}

.info-container {
  padding: 15px 0;
  padding-left: 10px;

  .el-col {
    margin-top: 15px;
  }

  .info-block {
    label {
      font-size: 14px;
      font-weight: 600;
      color: #3c475d;
      line-height: 20px;
    }

    span {
      font-size: 14px;
      font-weight: 400;
      color: #3c475d;
      line-height: 20px;
    }
  }
}

.webview-tag {
  width: 100%;
}
</style>
